<template>
	<div class="f-container">
		<div
			v-loading="sendLoading" >
			<mix-add 
				ref="mixadd" 
				crm-type="customerlog_file" 
				:id="id" 
				:show-relative-business="true"
				:show-relative-contacts="true" 
				@mixadd-info="submitInfo" />
			<flexbox class="se-section">
				<div class="se-name">跟进类型</div>
				<el-dropdown
					style="margin-right: 20px;"
					trigger="click"
					@command="handleTypeDrop">
					<flexbox class="se-select">
						<div class="se-select-name">{{ followType ? followType : '请选择' }}</div>
						<i
							class="el-icon-arrow-down el-icon--right"
							style="color:#ccc;"/>
					</flexbox>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item
							v-for="(item, index) in followTypes"
							:key="index"
							:command="item.type">{{ item.name }}</el-dropdown-item>
						</el-dropdown-menu>
				</el-dropdown>
				<el-button
					class="se-send"
					type="primary"
					@click.native="sendInfo">发布</el-button>
			</flexbox>
		</div>
		<div class="log-cont">
			<flexbox
				v-if="logTypes.length > 0"
				style="border-bottom: 1px solid #E6E6E6;">
				<flexbox
					v-for="(item, index) in logTypes"
					:key="index"
					style="width: auto;"
					@click.native="logTabsClick(item,index)">
					<div
						:style="{ color: logType==item.type ? '#F18C70' : '#777'}"
						class="log-tabs-item log-tabs-item1">{{ item.name }}</div>
					<div
						v-if="logTypes.length -1 != index"
						class="log-tabs-line"/>
				</flexbox>
			</flexbox>
			<record-log :id="id" :crm-type="crmType"/>
		</div>
	</div>
</template>

<script>
	import MixAdd from '@/components/table/MixAdd'
	import followLogType from '@/components/table/customer/mixins/followLogType'
	import RecordLog from '@/components/table/customer/RecordLog' // 跟进记录
	import { formatTimeToTimestamp } from '@/utils'
	import { crmRecordSave } from '@/api/customer/common'
	import CrmRelativeCell from '@/components/table/CrmRelativeCell'
	
	export default {
		/** 客户管理 的 客户详情 的 跟进记录*/
		name: 'CustomerFollow',
		components: {
			MixAdd,
			RecordLog,
			CrmRelativeCell
		},
		mixins: [followLogType],
		props: {
			/** 模块ID */
			id: [String, Number],
			/** 没有值就是全部类型 有值就是当个类型 */
			crmType: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				sendLoading: false,
				/** 是否添加日程提醒 */
				is_event: false,
				/** 下次联系时间 */
				next_time: '',
				logType: 'record',
				logTypes: [{name:'跟进日志',type:'record'}],
				// 关联信息
				relationInfo:{
					default_value:"",
					form_type:this.crmType,
					name:"",
					types:"",
					value:[],
					disabled:false
				},
				type_time:'',
				
			}
		},
		computed: {
			
		},
		watch: {
			id: function(val) {
				this.relationInfo.value = []
			}
		},
		mounted() {
		},
		activated: function() {},
		deactivated: function() {},
		methods: {
			/** 快捷添加框内 返回的数据用于上传 */
			submitInfo(data) {
				if (this.followType == "") {
					return this.$message.error('请选择跟进类型')
				}
				var params = {}
				params.types = 'crm_' + this.crmType
				params.types_id = this.id
				params.content = data.content
				params.category = this.followType
				var image_ids = data.images.map(function(element, index, array) {
					return element.file_id
				})
				var files_ids = data.files.map(function(element, index, array) {
					return element.file_id
				})
				params.file_id = image_ids.concat(files_ids)
				
				this.sendLoading = true
				crmRecordSave(params)
				  .then(res => {
				    this.sendLoading = false
				    this.$message.success(res.data)
				    // 重置页面
				    this.$refs.mixadd.resetInfo()
					this.followType = ""
				    // 刷新数据
				    this.$bus.emit('follow-log-refresh', { type: 'record-log' })
				  })
				  .catch(() => {
				    this.sendLoading = false
				  })
				
			},
			/** 发布 时候的类型选择 */
			handleTypeDrop(command) {
				this.followType = command
			},
			
			/** 告诉mixad 返回数据 */
			sendInfo() {
				this.$refs.mixadd.$emit('submit-info')
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../customer/styles/followlog.scss';
	@import "@/styles/xr-theme.scss";
	/deep/ .el-input--suffix .el-input__inner {
	    padding-right: 30px;
	    padding: 20px 25px;
	}
	
	/** 场景和筛选 */
	.condition_title {
		cursor: pointer;
	}
	
	.condition_title:hover {
		color: $xr-color-primary;
	}
	.c-filtrate {
		margin: 0;
		width: 12px;
	}
	.log-tabs-item1{
		margin-left: 0px !important;
	}
	.f-container{
		padding: 10px;
		background-color: #fff;
		font-size: 14px;
	}
</style>
